<template>
  <div class="DataInfo">
    <div class="top-box">
      <div class="left-img">
        <img src="./images/DataInfo-top.png" alt="">
      </div>
      <div class="right-cont">
        <div class="title">{{$t('route.AboutData')}}</div>
        <div class="cont-box">
          <div class="cont">
            {{$t('DataInfo.cont')}}
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-box">
      <el-card style="width:245px;">
        <div class="info" @click="jumpToDataInfoChildPages('DataSource')">
          <div class="title">{{$t('route.DataSource')}}</div>
          <div class="cont">{{$t('DataInfo.column1.cont')}}</div>
        </div>
      </el-card>
      <el-card style="margin-left:20px;width:588px;">
        <div class="info" @click="jumpToDataInfoChildPages('DataDictionary')">
          <div class="title">{{$t('route.DataDictionary')}}</div>
          <div class="cont">{{$t('DataInfo.column2.cont')}}</div>
        </div>
      </el-card>
    </div>
  </div>

</template>

<script>
    export default {
      name: "DataInfo",
      methods: {
        jumpToDataInfoChildPages(childPath) {
          this.$router.push({path: `/DataInfo/${childPath}`})
        }
      }
    }
</script>

<style lang="scss" scoped>
  .DataInfo{
    padding: 20px 46px;
    .title{
      font-family: OpenSansShin;
      text-align:center;
      font-weight:bold;
      font-size:20px;
      color:#333;
    }
    .cont{
      font-size:14px;
      color:#7c8694;
      line-height:28px;
    }
    .info{
      cursor:pointer;
    }
    .top-box{
      background:#fff;
      box-shadow: 0 2px 10px 0 rgba(226, 224, 234, 0.6);
      border-radius: 6px;
      height:190px;
      .left-img{
        float:left;
        img{
          width:266px;
          height:190px;
        }
      }
      .right-cont{
        float:left;
        margin-left:66px;
        width:68%;
        .title{
          color:#52b7db;
          padding:5px;
        }
        .cont-box{
          border:2px solid #59badd;
          height: 115px;
          .cont{
            width: 98.5%;
            height: 114px;
            padding:20px;
            border:2px solid #59badd;
            line-height:24px;
            transform:translate(5px,5px);
          }
          /*.cont:before{*/
            /*border:2px solid #59badd;*/
            /*content: '';*/
            /*display:block;*/
            /*height:120px;*/
          /*}*/
        }

      }
      @media screen and (max-width: 1366px){
        .right-cont{
          width:65%;
        }
      }
    }
    .bottom-box{
      margin-top:20px;
      height:115px;
      /*margin-left:86px;*/
      display:flex;
      justify-content: center;
      .title{
        color:#4dcfa3;
      }
      .cont{
        margin-top:20px;
      }
    }
  }

</style>
